<script>
	import { ref ,withModifiers,watch,computed,getCurrentInstance} from "vue"; 
	export default {
	  props: { 
	  	changeIndex:{
	  		type:Function
	  	},
	  	index:{
	  		type:[Number],
	  		default: 0
	  	},
	  	data:{
	  		type: [Array],
      		default: []
	  	}, 
	  	readOnly:{
	  		default:false,
	  		type:Boolean
	  	},
	  	visibleItemCount:{
	  		type:[Number,String],
	  		default:6
	  	},
	  	itemHeight:{
	  		type:[Number,String],
	  		default:44
	  	},
	  	swipeDuration:{
	  		type:[Number,String],
	  		default:200
	  	}
	  },
	  setup(props, { slots, emit }) {  
	  	
	    var test = getCurrentInstance();
	  	//从vant中提取间距中合适的值		//40为一个高度的单位
	  	var moverValue=80;	
	  	var timeId=-1;
	  	var index=ref(props.index); 
	  	 var catchPoint=ref({
	  		_index:0,
	  		y:0,
	  		lastY:0,
	  		isDraw:false,
	  		isEnd:false
	  	});  
	  	 
	  	var getUnit=function(){
			if(typeof(props.itemHeight)=="string"){
				if(props.itemHeight.lastIndexOf("px")!=-1){
					return "px";
				}else if(props.itemHeight.lastIndexOf("rem")!=-1){
					return "rem";
				}else if(props.itemHeight.lastIndexOf("vw")!=-1){
					return "vw";
				}
			}
			return "px";
  		}
	  	var translatePoint=function(){  
	  		var itemHeight=parseInt(props.itemHeight); 
	  		var showSize=props.visibleItemCount;  
  			var result=(itemHeight*showSize/2)-itemHeight/2;  
	  		result-=index.value*itemHeight;
	  		return (result)+getUnit();
	  	}; 
	  	var translate3dEnd=function(){
	  		catchPoint.value.isEnd=false;
	  	}
	  	var mover=function(event){
	  		if(props.readOnly){
	  			return;
	  		}    
	  		//结束
	  		if(event.type=="touchend"){
		  		index.value=parseInt(catchPoint.value._index-(catchPoint.value.lastY-catchPoint.value.y)/moverValue);
		  		if(index.value<0){
		  			index.value=0;
		  		}else if(index.value>=props.data.length){
		  			index.value=props.data.length-1;
		  		}
		  		if(props.changeIndex){
		  			props.changeIndex(index.value);
		  		}
		  		catchPoint.value.isEnd=true; 
		  		//结束时主动停止
		  		clearTimeout(timeId);
		  		timeId=-1;
	  		//开始
	  		}else if(event.type=="touchstart"){
	  			catchPoint.value._index=index.value;
	  			catchPoint.value.y=event.touches[0].clientY;
  				catchPoint.value.isEnd=false;
	  		//移动中
	  		}else {
	  			catchPoint.value.isEnd=false; 
	  			catchPoint.value.lastY=event.touches[0].clientY;
	  			index.value=catchPoint.value._index-(catchPoint.value.lastY-catchPoint.value.y)/moverValue;
	  		}
	  		if(timeId!=-1){
	  			clearTimeout(timeId);
	  			timeId=setTimeOut(function(){ 
	  				timeId=-1;
	  				//人为问题 主动计算下标
	  				index.value= parseInt(catchPoint.value._index-(catchPoint.value.lastY-catchPoint.value.y)/moverValue);
			  		if(index.value<0){
			  			index.value=0;
			  		}else if(index.value>props.data.length){
			  			index.value=props.data.length-1;
			  		}
	  			},200);
	  		}
	  		 
	  	}  
	    return () => (
	    	<div  class="g-picker-column" 
	    		onTouchstart={mover}  
	    		onTouchmove={mover}
	    		onTouchend= {mover} 
	    		style={{ 
	    			height:(parseInt(props.itemHeight)*props.visibleItemCount+getUnit())
	    		}}
	    	> 
	    		<div
	    		onTransitionend={translate3dEnd} 
	    		style={{
    			    transform:"translate3d(0px, "+translatePoint()+", 0px)",
    			   'transition-property':catchPoint.value.isEnd?'all':'none',
                	'transition-duration':catchPoint.value.isEnd?props.swipeDuration+'ms':'0ms'
	    		}}>
	    		<ul>
	    			{
	    				props.data.map((item,_indx)=>{
	    					return <li class="g-picker-column__item" 
	    					style={{
	    						height:parseInt(props.itemHeight)+getUnit()
	    					}} 
	    					onClick={()=>{index.value=_indx; props.changeIndex?props.changeIndex(_indx):null;}}
	    					>{item.name}</li>
	    				})
	    			}
	    		</ul>
	    		</div>
	    	</div> 
	    );
	  }
	};
</script>
